<template>
  <!-- <app-page> -->
  <div class="message_index">
    <div class="message_content">
      <div class="title">
        <img src="@/assets/message/notice.png" style="width: 28px; height: 28px" alt="" />
        <div style="margin-left: 8px">{{languageJson.notice.notice}}</div>
      </div>
      <Tabs :tabs="tabs" :activetab="activetab" @change="changeactivetab" @changeallread="changeallread" />
      <Table :data="messageList" :loading="messageLoading" :tabs="tabs" />
    </div>
    <div class="message_footer">
      <div>
        <el-pagination
          v-model:current-page="page.page"
          v-model:page-size="page.page_size"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, prev, pager, next,sizes"
          :total="page.total"
          @size-change="getMessagelist()"
          @current-change="getMessagelist()"
        />
      </div>
    </div>
  </div>
  <!-- </app-page> -->
</template>

<script setup>
import Tabs from './components/Tabs.vue'
import Table from './components/Table.vue'
import { http } from '@/utils/http'
import { onMounted } from 'vue'
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const messageList = ref([{}])
const messageLoading = ref(false)
const page = ref({
  page: 1,
  page_size: 20,
  total: 0,
})

const activetab = ref(-1)
const tabs = ref([
  { label: languageJson.value.home.all, value: -1 },
  { label: languageJson.value.notice.ordinaryMessages, value: 1 },
  { label: languageJson.value.notice.importantMessage, value: 2 },
  { label: languageJson.value.notice.warntMessage, value: 3 },
  { label: languageJson.value.notice.successMessage, value: 4 },
])

const changeactivetab = data => {
  activetab.value = data
  page.value.page = 1
  page.value.page_size = 20
  getMessagelist()
}

const getMessagelist = () => {
  messageLoading.value = true
  let body = {
    params: {
      page: page.value.page,
      page_size: page.value.page_size,
    },
  }
  if (activetab.value != -1) {
    body.params.level = activetab.value
  }
  http.get('/message/list', body).then(res => {
    messageList.value = res.data.list
    page.value.total = res.data.total
    messageLoading.value = false
  })
}

const changeallread = () => {
  http.get('/message/read_all').then(res => {
    getMessagelist()
  })
}
onMounted(() => {
  getMessagelist()
})
</script>

<style lang="scss" scoped>
.message_index {
  display: flex;
  width: 100vw;
  height: 100vh;
padding: 16px;
  display: flex;
  flex-direction: column;
}

.message_content {
  width: 100%;
  height: calc(100% - 40px);
  padding: 18px 16px 16px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.message_footer {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.title {
  display: flex;
  align-items: center;
  margin-bottom: 26px;

  div {
    font-family: AlibabaPuHuiTi_2_85_;
    font-size: 24px;
    font-weight: bold;
    color: #000;
  }
}
</style>

<style>
.message_footer .el-pager li {
  margin-left: 8px;
  border-radius: 0;
}
.message_footer .el-pager li,
.message_footer .el-pagination__total,
.message_footer .el-pagination__sizes .el-select__selected-item {
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 14px;
  color: #000;
}
.message_footer .el-pager .is-active {
  color: #fff;
  background-color: #3711d8;
}
.message_footer .el-pager li:last-child {
  margin-right: 8px;
}
</style>
